@use '@material/radio/radio' as mdc-radio;
@use '@material/radio/radio-theme' as mdc-radio-theme;
@use '@material/form-field' as mdc-form-field;
@use '../mdc-helpers/mdc-helpers';
@use '../../cdk/a11y/a11y';
@use '../../material/core/style/layout-common';

@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);

// This is necessary because we do not depend on MDC's ripple, but have our own that should be
// positioned correctly. This can be removed once we start using MDC's ripple implementation.
.mat-mdc-radio-button .mat-radio-ripple {
  @include layout-common.fill;

  pointer-events: none;
  border-radius: 50%;

  .mat-ripple-element:not(.mat-radio-persistent-ripple) {
    opacity: mdc-radio-theme.$ripple-opacity;
  }
}

// Note that this creates a square box around the circle, however it's consistent with
// how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
// into a dotted one, because it's too thick which causes the circles to look off.
@include a11y.high-contrast {
  .mat-mdc-radio-button:not(.mat-radio-disabled) {
    &.cdk-keyboard-focused,
    &.cdk-program-focused {
      .mat-radio-ripple {
        outline: solid 3px;
      }
    }
  }
}
